<template>
	<view class="details visitorDetails pB100ux">
		<view class="details-top overflow">
			<image :src="visitorinfo.personimg | personimg" class="w100 h100 block" mode=""></image>
		</view>
		<view class="details-message bg_white">
			<view class="details-message-name">访客姓名：{{visitorinfo.name}}</view>
			<view class="details-message-sex" v-if="visitorinfo.sex==1">访客性别：男</view>
			<view class="details-message-sex" v-if="visitorinfo.sex==2">访客性别：女</view>
			<view class="details-message-number" v-if="visitorinfo.identitycard | isidcard">身份证号：{{visitorinfo.identitycard | isidcard}}</view>
			<view class="details-message-phone">手机号码：{{visitorinfo.mobile}}</view>
			<view class="details-message-company" v-if="visitorinfo.company">受访公司：{{visitorinfo.company?visitorinfo.company:visitorinfo.company_name}}</view>
		</view>
		<view class="details-message " v-if="setlongtimevistorchanger">
			设定长期访客
			<view class="input-row border">
				到访时间：
					<input type="primary" placeholder="请选择时间" v-model="cometime" @click="onShowDatePicker('cometime')"></input>
			</view>

			<view class="input-row border">预约结束：
				<input type="primary" placeholder="请选择时间" v-model="endtime" @click="onShowDatePicker('endtime')"></input>
				<mx-date-picker
					:show="showPicker"
					:type="type"
					:value="value"
					:show-tips="true"
					:begin-text="'入住'"					
					:end-text="'离店'"
					:show-seconds="true"
					@confirm="onSelected"
					@cancel="onSelected"
				/>
			</view>
		</view>
		
		<view class="details-message-logs bg_white" v-if="vistorLogs.length!=0" v-for="(item,index) in vistorLogs">
			<view class="p10" v-if="index<6">
				<view class="details-message-logs-date">到访日期：{{reTime(item.app_visittime)}}</view>
				<view class="details-message-logs-company">到访公司：{{item.app_company_name}}</view>
				<view class="details-message-logs-dep">到访部门：{{item.address}}</view>
			</view>
			<view class="p10" v-if="visiterLogschanger&&index>6">
				<view class="details-message-logs-date">到访日期：{{reTime(item.app_visittime)}}</view>
				<view class="details-message-logs-company">受访公司：{{item.app_company_name}}</view>
				<view class="details-message-logs-dep">到访部门：{{item.address}}</view>
			</view>
		</view>
		
		<view class="intervieweeInformation" v-if="visiterLogschanger&&index>6">
			
			<view class="intervieweeInformation-company" @click="vistorDetail">{{vistorDetailtext}}</view>
		</view>
		<view class="btn-button" v-if="vistorLogs.length!=0">
			<!-- <view class="cancel" @click="setlongVistors" >{{setlongVistorsbtn.text}}</view> -->
			<view v-if="cancelsetVistorschanger" class="cancel" @click="cancelsetVistors" >{{setlongVistorsbtn.canceltext}}</view>
			<!-- <view class="Approved"  @click="backrefresh()">返回</view> -->
			<!-- <view class="Approved">审核通过</view>
			<view class="Confirm">确认离开</view> -->
		</view>
		<backnext></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
</template>

<script>
	import {visiteradd} from '@/common/api/visiter.js'
	import {conpanyUlogs} from '@/common/api/company.js'
	import MxDatePicker from '@/components/mx-datepicker/mx-datepicker.vue';
	import {timestampToTime} from '@/common/common.js'
	export default {
		components: {
			MxDatePicker
		},
		watch:{
			cometime(newval,oldval){
				this.checkchoiceTime()
			},
			endtime(newval,oldval){
				this.checkchoiceTime()
			},
		},
		data() {
			return {
				userinfo:[],
				visitorinfo:"",
				vistorDetailtext:'到访详细记录 v',
				setlongVistorsbtn:{
					'value':0,
					'text':'设定为长期访客',
					'canceltext':'取消'
				},
				vistor:[],
				vistorLogs:[],
				visiterLogschanger:false,
				setlongtimevistorchanger:false,
				cancelsetVistorschanger:false,
				cometime:'',
				endtime:'',
				
				showPicker: false,
				type: 'rangetime',
				value: ''
			};
		},
		onLoad(options){
		
			if(options.visitorinfo){
				this.visitorinfo = JSON.parse(options.visitorinfo)
				// this.visitorinfo.options = JSON.parse(JSON.parse(options.optionsinfo))
				uni.getStorage({
					key: 'userinfo',
					success: res => {
						this.userinfo = res.data
					}
				});
				conpanyUlogs({
					uid:this.visitorinfo.uid
				}).then(res=>{
					console.log(res)
					if(res.data.code == 200){
						this.vistorLogs = res.data.data
					}
				})
			
			}
			console.log(this.visitorinfo)
		},
		
		methods:{
			reTime(val){
				return timestampToTime(val)
			},
			checkchoiceTime(){
				if(this.cometime == '' || this.cometime == ''){
					return false
				}
				if(this.cometime!='' && this.endtime!='' && this.setlongVistorsbtn.value == 1){
					return true
				}
				return false
			},
			vistorDetail(){
				/*不跳转载本页面完成*/
				// uni.navigateTo({
				// 	url: './detailedRecords'
				// });
				if(this.vistorLogs.length == 0 ){
					this.vistorDetailtext = '暂无记录'
					setTimeout(function(){this.vistorDetailtext = '收起^'}, 3000);
					return 
				}
				if(!this.visiterLogschanger){
					this.vistorDetailtext = '收起^'
				}else{
					this.vistorDetailtext = '到访详细记录 v'
					this.visiterLogschanger = false
					return 
				}
				this.visiterLogschanger = true
			},
			setlongVistors(){
				console.log(this.userinfo)
				this.setlongVistorsbtn.text = '确认设为长期访客'
				this.setlongtimevistorchanger = true
				this.cancelsetVistorschanger = true
				this.setlongVistorsbtn.value = 1
				
				if(this.checkchoiceTime()){
					// console.log(this.cometime)
					// console.log(this.endtime)
				
					visiteradd({
						'uid':this.visitorinfo.uid,
						'companyid':this.visitorinfo.companyid,
						'deptid':this.visitorinfo.deptid,
						'starttime':this.cometime,
						'endtime':this.endtime
					}).then(res=>{
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2000
						});
						this.cancelsetVistors()
					})
					// this.setlongtimevistorchanger = false
				}else{
					uni.showToast({
						icon: 'none',
						title: '请选择时间',
						duration: 2000
					});
					
				}
				/*不跳转载本页完成*/
				// uni.navigateTo({
				// 	url: './setLongvisitors'
				// });
			},
			onShowDatePicker(type) {
				//显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) {
				//选择
				console.log(e)
				console.log(this.type)

				if(this.type == 'cometime'){
					let choicetime = new Date(e.value).getTime()
					let nowtime = (new Date()).valueOf()
					if(choicetime<nowtime){
						uni.showToast({
						    title: '该时间不可选',
						    duration: 2000,
							icon:'none'
						});
						return
					}
				} 
				if(this.type == 'endtime'){
					let choicetime = new Date(e.value).getTime()
					let nowtime = (new Date()).valueOf()

					if(choicetime < new Date(this.cometime).getTime()){
						uni.showToast({
						    title: '该时间不可选',
						    duration: 2000,
							icon:'none'
						});
						return
					}
				}
				
				this.showPicker = false;
				
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			},
			/*取消设定长期访客*/
			cancelsetVistors(){
				this.cometime = ''
				this.endtime  = ''
				this.cancelsetVistorschanger = false
				this.setlongtimevistorchanger = false
				this.setlongVistorsbtn.text = '设为长期访客'
			}
		}
		}
</script>

<style lang="scss" scoped>
.details {
	color: rgba(80, 80, 80, 1);
	font-size: 15px;
	width: 100%;
	// background-color: white;
	.details-top {
		border-radius: 50%;
		width: 80px;
		height: 80px;
		left: 148px;
		top: 105px;
		font-size: 117px;
		color: rgba(153, 153, 153, 1);
		border: 1px solid;
		margin: auto;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	.details-message {
		width: 95%;
		margin: auto;
		uni-view {
			// margin: 12px 0;
			padding: 10px;
			border-bottom: 1px solid #eee;
		}
	}
	.details-message-logs{
		width: 95%;
		margin: auto;
		border-bottom: 1px solid #f1f1f1;
	}
	.intervieweeInformation {
		width: 95%;
		margin: auto;
		uni-view {
			margin: 10px 0;
			border-bottom: 1px solid #eee;
		}
	}
	.statusInformation {
		width: 95%;
		margin: auto;
		.status-information {
			display: flex;
			.right {
				margin-left: 10px;
			}
		}
	}
	.btn-button {
		display: flex;
		width: 80%;
		margin: auto;
		justify-content: space-around;
		margin: 20px auto;
		uni-view {
			color: rgba(255, 255, 255, 1);

			border-radius: 18px;
			// font-size: 11px;
			padding: 5px 15px;
		}
		.cancel {
			background-color: rgba(212, 48, 48, 1);
		}
		.Approved {
			background-color: rgba(42, 130, 228, 1);
		}
		.Confirm {
			background-color: rgba(128, 128, 128, 1);
		}
	}
	.visitorDetails .uni-input-placeholder{font-size: 14px;}
}
</style>
